<template>
	<view>
		<view class="spendtop">
			<view class="spendtop_un">
				<view class="cell" @click="selectDatePicker">
					<view class="cell-title ">
						{{detail}}
					</view>
					<view class="cell-title">
						{{dateString}}
					</view>
				</view>
				<jpTimePicker ref='date-time' :datestype="type" :datestring='dateString' @change='dateTimeChange'>
				</jpTimePicker>
			</view>
			<view class="spendtop_dw">
				支出￥1817.61收入￥2149.31
			</view>
		</view>

		<view class="spendlist">
			<view class="list_img">
				<image src="../../../../static/images/jspend.png"
					style="width: 55px;height: 55px;margin-top: 10px;margin-left: 10px;"></image>
			</view>
			<view class="list_title">
				<view class="title_un">
					微信支付 八维淘宝
				</view>
				<view class="title_dw">
					1月11日 12:15
				</view>
			</view>
			<view class="list_price">
				-10.00
			</view>
		</view>
	</view>
</template>

<script>
	import jpTimePicker from '@/components/jp-timePicker/jp-timePicker.vue'
	export default {
		components: {
			jpTimePicker
		},
		data() {
			return {
				dateString: '',
				type: 'year',
				title: '展示时间',
				detail: '请选择年↓'

			}
		},
		computed: {},
		methods: {
			selectDatePicker() {
				this.$refs['date-time'].show();
			},
			dateTimeChange(value) {
				console.log(value)
				this.dateString = value
			}
		}
	}
</script>

<style scoped>
	.spendtop {
		width: 100%;
		height: 100px;
	}

	.spendtop_un {
		width: 98%;
		height: 50px;
		margin-left: 2%;
	}

	.spendtop_dw {
		width: 100%;
		height: 50px;
		line-height: 20px;
		font-size: 12px;
		padding-left: 10px;
		color: #ccc;
	}

	.spendlist {
		width: 100%;
		height: 80px;
		background-color: #fff;
		display: flex;
		flex-wrap: nowrap;
	}

	.list_img {
		width: 15%;
		height: 80px;
	}

	.list_title {
		width: 50%;
		height: 80px;
		margin-left: 5%;
	}

	.title_un {
		width: 100%;
		height: 40px;
		line-height: 55px;
	}

	.title_dw {
		width: 100%;
		height: 40px;
		line-height: 20px;
		font-size: 12px;
		color: #ccc;
	}

	.list_price {
		width: 25%;
		height: 80px;
		line-height: 55px;
		font-weight: 600;
		text-align: right;
	}
</style>
